<template>
  <div class="alCell">
    <van-cell :value="value" @click="clickLeft">
      <template #title>
        <van-loading size="10px" v-if="loadTitle && title == null">加载中...</van-loading>
        <span v-if="title != null">{{ title }}</span>
      </template>
      <!-- 左侧图标 -->
      <template #icon>
        <i class="iconfont" :class="icon"></i>
      </template>
      <!-- 右侧内容 -->
      <template>
        <slot>{{ value }}</slot>
      </template>
      <!-- 右侧图标 -->
      <template #right-icon>
        <i v-show="showRightIcon" class="iconfont icon-more"></i>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'AlCell',
  props: ['title', 'value', 'icon', 'showRightIcon','loadTitle'],
  methods: {
    clickLeft() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="less">
.alCell {
  .van-cell {
    height: 55px;
    line-height: 37.5px;
    font-size: 15px;
    border-radius: 10px;
    //margin-left: -1.2rem;
  }

  .iconfont.left-icon {
    margin-right: 1px;
  }

  .icon-more {
    margin-left: 8px;
  }
}
</style>
